<template>
    <swiper :class="show" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <block>
            <swiper-item>
                <view class="emoji_item">
                    <image v-for="(item, index) in emojiObj.map1" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
                <view class="emoji_item">
                    <image v-for="(item, index) in emojiObj.map2" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
                <view class="emoji_item">
                    <image v-for="(item, index) in emojiObj.map3" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
            </swiper-item>
        </block>
        <block class="second">
            <swiper-item>
                <view class="emoji_item">
                    <image v-for="(item, index) in emojiObj.map4" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
                <view class="emoji_item">
                    <image v-for="(item, index) in emojiObj.map5" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
                <view class="emoji_item last_item">
                    <image v-for="(item, index) in emojiObj.map6" :key="index" :src="emojiObj.path + item" @tap="sendEmoji" :data-emoji="index"></image>
                </view>
            </swiper-item>
        </block>
    </swiper>
</template>

<script>
let WebIM = require("../../../../../../utils/WebIM")["default"];
let msgType = require("../../../msgtype");
let EMOJI_STATUS = {
    OPENED: "showEmoji",
    CLOSED: "emoji_list"
};

export default {
    data() {
        return {
            show: EMOJI_STATUS.CLOSED,
            emoji: WebIM.Emoji,
            emojiObj: WebIM.EmojiObj,
            interval: 5000,
            duration: 1000,
            autoplay: false,
            indicatorDots: true // 显示面板指示点

        };
    },

    components: {},
    props: {},
    methods: {
        openEmoji() {
            this.setData({
                show: EMOJI_STATUS.OPENED
            });
        },

        cancelEmoji() {
            this.setData({
                show: EMOJI_STATUS.CLOSED
            });
        },

        // 输出 emoji
        sendEmoji(event) {
            var emoji = event.target.dataset.emoji;
            this.$emit("newEmojiStr", {
                msg: emoji,
                type: msgType.EMOJI
            }, {
                    bubbles: true,
                    composed: true
                });
        }

    }
};
</script>
<style>
@import "./emoji.css";
</style>